<template>
  <div class="page-layout">
    <el-row :gutter="20">
      <el-col :span="6">
        <ul>
          <li>1、运单</li>
          <li>2、索赔函</li>
          <li>3、购销合同及发票</li>
          <li>4、双港过磅单</li>
          <li>5、现场照片</li>
        </ul>
      </el-col>
      <el-col :span="18"
        ><el-upload
          list-type="picture-card"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          :auto-upload="false"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            />
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download"></i>
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div> </el-upload
      ></el-col>
    </el-row>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="赔付金额">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>

    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="保单信息" name="first">用户管理</el-tab-pane>
      <el-tab-pane label="案件基本信息" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="查勘定损信息" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="领款人信息" name="fourth">定时任务补偿</el-tab-pane>
      <el-tab-pane label="第三方机构" name="fourth">定时任务补偿</el-tab-pane>
      <el-tab-pane label="跟进记录" name="fourth">定时任务补偿</el-tab-pane>
      <el-tab-pane label="案件处理人信息" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      activeName: "second",
      form: {
        name: ""
      },
    };
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
  },
};
</script>
<style scoped>
</style>
